<template>
  <div class="myinfo">
    <div class="copy">
      <NuxtImg src="/img/download.png" alt="" />
      <div class="bg">
        <span>{{ $t('language.Share.Myinfo.youlink') }}</span>
        <p>
          <span>{{ ip + "?gameID=" }}</span>
          <NuxtImg  @click="copyToClipboard(ip)" src="/img/recopy.png" alt="" />
        </p>
      </div>
    </div>
    <div class="imglist">
      <NuxtImg @click="openWeb('https://t.me/share')" src="/img/fly.png" alt="" />
      <NuxtImg @click="openWeb('https://m.facebook.com/')" src="/img/re9.png" alt="" />
      <NuxtImg @click="openWeb('https://api.whatsapp.com/')" src="/img/re8.png" alt="" />
      <NuxtImg @click="openWeb('https://www.instagram.com/')" src="/img/re10.png" alt="" />
      <NuxtImg @click="openWeb('https://twitter.com/')" src="/img/re7.png" alt="" />
    </div>
    <div class="text">
      <h3>{{ $t('language.Share.Myinfo.team.title') }}</h3>
      <ul>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.team.Registered') }}</strong><span>{{
          myInfo.teamBonus.registerCounts }}</span></div>
          <!-- <div><strong>Apostas válidas</strong><span> R${{ myInfo.teamBonus.effectiveBets }} </span></div> -->
        </li>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.team.amount') }}</strong><span> R${{
          $dot(myInfo.teamBonus.paymentCoins) }} </span></div>
          <div><strong>{{ $t('language.Share.Myinfo.team.rechange') }}</strong><span> {{
          myInfo.teamBonus.paymentCounts }}</span></div>
        </li>
      </ul>
    </div>
    <div class="text">
      <h3>{{ $t('language.Share.Myinfo.level1.title') }}</h3>
      <ul>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.level1.Registered') }}</strong><span> {{
          myInfo.firstBonus.paymentCounts }}</span></div>
          <!-- <div><strong>Apostas válidas</strong><span> R${{ myInfo.firstBonus.paymentCounts }} </span></div> -->
        </li>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.level1.amount') }}</strong><span> R${{
          $dot(myInfo.firstBonus.paymentCounts) }} </span></div>
          <div><strong>{{ $t('language.Share.Myinfo.level1.rechange') }}</strong><span> {{
          myInfo.firstBonus.paymentCounts }}</span></div>
        </li>
      </ul>
    </div>
    <div class="text">
      <h3>{{ $t('language.Share.Myinfo.level2.title') }}</h3>
      <ul>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.level2.Registered') }}</strong><span>{{
          myInfo.secondBonus.paymentCounts }}</span></div>
          <!-- <div><strong>Apostas válidas</strong><span> R${{ myInfo.secondBonus.paymentCounts }}</span></div> -->
        </li>
        <li>
          <div><strong>{{ $t('language.Share.Myinfo.level2.amount') }}</strong><span> R${{
          $dot(myInfo.secondBonus.paymentCounts) }}</span></div>
          <div><strong>{{ $t('language.Share.Myinfo.level2.rechange') }}</strong><span>{{
          myInfo.secondBonus.paymentCounts }}</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, reactive, onBeforeMount } from "vue";
import { useI18n } from "vue-i18n";
// import { copyToClipboard } from "@/utils/common";
// const { proxy } = getCurrentInstance();
const { t } = useI18n();
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
let openWeb = (url: string):void => {
  window.open(url)
}
const open2 = ():void => {
  ElMessage({
    message: t("language.info.copytips"),
    type: "success",
  });
};
// 获取ip地址
let ip = shallowRef<null | undefined | string>(null)
onBeforeMount(() => {
  ip.value = window.location.href
  console.log(ip.value, '000');

})
//获取我的资讯


let myInfo: any = reactive({
  firstBonus: { registerCounts: 0, paymentCounts: 0, effectiveBets: 0, paymentCoins: 0 },
  secondBonus: { registerCounts: 0, paymentCounts: 0, effectiveBets: 0, paymentCoins: 0 },
  teamBonus: { registerCounts: 0, paymentCounts: 0, effectiveBets: 0, paymentCoins: 0 },
})
const store = useStore();
let info = computed(() => store.userinfo)
let initData =async  () => {
  await nextTick()
  useAllData('Share/News',`/UserCenter/v1.0/Promotion/Share/News`, { id: info.value.gameID }).then(({ data }: { data: any }) => {
    for (let key in myInfo) {
      myInfo[key] = data.value.data[key]
    }
  })
}
initData()

</script>

<style scoped lang="scss">
.myinfo {
  width: 100%;

  .copy {
    width: 100%;
    height: 150px;
    position: relative;

    position: relative;

    >img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .bg {
      width: 100%;
      position: absolute;
      width: 92%;
      left: 4%;
      bottom: 10%;
      z-index: 2;

      span {
        display: block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: left;
        color: #fff;
      }

      p {
        background-color: #301602;

        height: 38px;
        border-radius: 4px;
        @include flex(row, space-between, center);
        padding: 0 10px 0 15px;

        span {
          font-size: 14px;
          color: #b5bacb;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        img {
          width: 22px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
  }

  .imglist {
    width: 100%;
    @include flex(row, center, center);

    img {
      height: 53px;
    }

    img+img {
      margin-left: 25px;
    }

    padding: 20px 0;
  }

  .text {
    width: 100%;
    border-top: 1px solid #4a4c435d;

    h3 {
      font-size: 22px;
      color: #b5bac8;
      text-align: center;
      margin: 30px 0 0px 0;
      font-weight: normal;
    }

    ul {
      width: 100%;
      margin-bottom: 30px;

      li {
        margin-top: 20px;
        @include flex(row, space-around, center);

        div {
          width: 50%;
          @include flex(column, center, center);

          strong {
            font-size: 16px;
            color: #b5bac8;
            font-weight: normal;
          }

          span {
            font-size: 16px;
            color: #7ff000;
            display: block;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
